<template>
  <div>
    <h3 style="font-size: 24px">轮播图管理</h3>
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="序号" width="160px" />
      <el-table-column label="图片">
        <template #default="scope">
          <!-- scope.row表示的是这一行的数据 -->
          <el-image style="width: 200px; height: 100px" :src="scope.row.url" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240px">
        <template #default="scope">
          <el-button type="warning">编辑</el-button>
          <el-button type="danger" @click="remove(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getBannerApi } from "@/assets/js/api";

const tableData = ref([]);
const getData = async () => {
  const res = await getBannerApi();
  tableData.value = res.data;
};

onMounted(() => {
  getData();
});

const remove = (id: string) => {
  console.log(id);
};
</script>

<!-- <script setup lang="ts">
// import { onMounted } from "vue";
// import axios from "axios";

// const instance = axios.create({
//   // 基础路径
//   baseURL: "http://101.35.148.193:3001/api",
//   // 超时时间
//   timeout: 1000,
//   // headers: {
//   //   token: localStorage.getItem("token"),
//   // },
// });

// // 添加请求拦截器
// instance.interceptors.request.use(
//   function (config) {
//     // 在发送请求之前做些什么
//     // config就是前端给后端发的所有的东西
//     console.log(config);
//     config.headers.token = "99999";
//     // if (config.url === "xxx") {
//     //   config.headers.Accept = "application/json, text/plain, */*";
//     // }
//     return config;
//   },
//   function (error) {
//     // 对请求错误做些什么
//     return Promise.reject(error);
//   }
// );

// // 添加响应拦截器
// instance.interceptors.response.use(
//   function (response) {
//     // 对响应数据做点什么
//     // console.log(response);

//     if (response.status === 200) {
//       if (response.data.success) {
//         return response.data;
//       } else if (response.data.msg === "token错误") {
//         // 跳转到登录页
//       }
//     } else if (response.status === 404) {
//       // ...
//     } else if (response.status === 500) {
//       // ...
//     }
//   },
//   function (error) {
//     // 对响应错误做点什么
//     return Promise.reject(error);
//   }
// );

// onMounted(() => {
//   instance
//     .get("/swper/list")
//     .then((res) => {
//       console.log(res);
//     })
//     .catch((error) => {
//       console.log(error);
//     });
//   // axios
//   //   // .get("http://101.35.148.193:3001/api/product/tag?type=1")
//   //   .get("http://101.35.148.193:3001/api/product/tag", {
//   //     params: {
//   //       type: 1,
//   //     },
//   //   })
//   //   .then((res) => {
//   //     console.log(res.data);
//   //   })
//   //   .catch((error) => {
//   //     console.log(error);
//   //   });
//   instance
//     .post("/admin/login", {
//       username: "admin",
//       password: "123456",
//     })
//     .then((res) => {
//       console.log(res);
//     })
//     .catch((error) => {
//       console.log(error);
//     });
//   // axios({
//   //   method: "get",
//   //   url: "http://101.35.148.193:3001/api/product/tag",
//   //   params: {
//   //     type: 1,
//   //   },
//   // }).then((res) => {
//   //   console.log(res);
//   // });
// });
</script> -->
